<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-font.css"/>
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			.goodsdiv{
				width: 100%;
				padding: 0.2em;
				height: auto;
				border-bottom: 1px solid #ACACB4;
			}
			
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 5px;
			}
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.toptext{
				width: 60%;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;
				padding-left: 1em;
			}
			.topimg{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20%;
				height: auto;
			}
			.topimg>img{
				width: 100%;
				height: 100%;
				border-radius:50% ;
			}
			.qian{
				width: 50%;
			}
			.textdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		</style>
	</head>



	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">商品管理</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="adddiv">
		    	<img src="../img/add.png"/>
		    </div>
		</header>
		<div id="refreshContainer"  class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
		    <div class="content">
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="card_number" class="ssinp" type="" placeholder="请输入产品条码或名称" />
						</form>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-03-18
                        	描述：
		    			<input class="ssinp" type="" name="" id="card_number" value=""  placeholder="请输入编码或名称"/>
                        -->
		    		</div>
		    		<div class="simg">
		    			<img id="goscann" src="../img/saomiao.png"/>
		    		</div>
		    	</div>
		    </div>
		    <div class="context">
		    	<div class="tleft fe09" id="selectdiv">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-14
                    	描述：
		    		<div class="bgw"  href="#" id="1">
		    			所有商品
		    		</div>
		    		<div class="" href="#" id="1">
		    			1个商品
		    		</div>
		    		<div class="" id="2" href="#">
		    			2个商品
		    		</div>
                    -->
		    	</div>
		    	<div class="tright ">
		    		<div class="tmain bgw" id="tmain">
                        <!--
                        	作者：592176224@qq.com
                        	时间：2019-02-15
                        	描述：
                       
                        <div class="goodsdiv bgw">
		    				<div class="topdiv">
		    					<div class="topimg">
		    						<img src="../images/books_bg.png"/>
		    					</div>
			    					<div class="toptext">
			    						<div class="textdiv">
			    							<span class="fe09">
			    							maimaimai
			    							</span>
			    							<span class="fe09">
			    								￥100.00
			    							</span>
			    						</div>
			    						<div class="textdiv">
			    								<span class="fe09">
			    									库存：100
			    								</span>
			    								<span id="">
			    									删除
			    								</span>
			    						</div>
			    					</div>
		    				</div>
		    			</div>
		    			  	 -->
		    		</div>
		    		<div class="morediv hidden" id="moreid">
				   		<span id="more_list" >更多</span>
				   	</div>
		    	</div>
		    </div>
		    </div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var sort_id = 0,//分类id
			pagenums = 1,	//分页
			tarnum = 0,		//分类
			flag = false;	//刷新
			var glist = [];
			window.onload = function(){
				mui.init({
					 pullRefresh: {
				        container: '#refreshContainer',
				        down: {
				            callback: pulldownRefresh
				        },
				        up:{
				        	callback: pullupRefresh
				        }
				    }
				});
				function pullupRefresh(){
					more_list();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				}
				function pulldownRefresh(){
					pagenums = 1;
		      		glist = [];
            		upToRefresh();
		      		getsortlist();
		      		
				}
				
				
				//监听商品分类改变
				$('#selectdiv').on('tap', 'div', function(e) {
                var targettab = this.getAttribute('id');
                console.log(targettab);
                tarnum = targettab;
                var targetclass = this.getAttribute('class');
	                if(targetclass == ""&&targettab != "addproduct"){
	                	$(this).addClass('bgw').siblings().removeClass('bgw');
	                	pagenums = 1;
	                	glist = [];
            			upToRefresh();
	                	getsortlist();
	                }else{
	                	
	                }
           	 	});
           	 	
           	 	//更多
           	 	g("more_list").addEventListener("tap",function(){
           	 		more_list();
           	 	})
           	 	
           	 	//监听扫描
           	 	g("goscann").addEventListener("tap",function(e){
							var list = {
		                         pageid:"commodity-management",
		                         returnfun:"setcard_number"
		            		}
		                    mui.openWindow({
		                        url: '../general/scanning-page.html',
		                        id: 'scanning-page',
		                        extras: list,
		                        show: {
		                            aniShow: 'zoom-fade-in',
		                            duration: 300
		                        },
		                        waiting: {
		                            autoShow: true
		                        }
		                });
							
						})
           	 	
           	 	//监听点击 + 去添加商品
           	 	$('#adddiv').on('tap',function(e) {
	                mui.openWindow({
	                	url:'addgoods.html',
	                	id:'addgoods'
	                })
	                
           	 	});
           	 	
           	 		//商品详情
           	 	$("#tmain").on("tap",".godetails",function(){
           	 		var gid = $(this).attr("data-gid");
           	 		gosetgoods(gid);
           	 	})
           	 	
           	 	//删除商品
           	 	$("#tmain").on("tap",".delgoods",function(){
           	 		console.log("点击");
           	 		var gid = $(this).attr("data-gid");
           	 		delgoods(gid);
           	 	})
           	 	
           	 	document.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0];
					if(e && e.keyCode == 13) {
						pagenums = 1;
	                	glist = [];
            			upToRefresh();
						getsortlist();
					}
				}
           	 	
           	 	getproduct();
				getsortlist();
			}
			
			//根据商品分类查找商品
			function getsortlist(sid){
				var data = {url:"/api/product/list_sort",
					data:{
						access_token:acctoken(),
						sort_id:tarnum||0,
						key:g("card_number").value||"",
						page:pagenums
					}
				}
				ajax(data,function(res){
					console.log("商品数据",res);
					let list = res.data.data;
					if(list.length){
						list.forEach(function(item,index){
							glist.push(item);
						})
						glist = remove_duplicate(glist);
						console.log(glist);
						setsortlist(glist);
						$("#moreid").removeClass("hidden");
						if(list.length < res.data.per_page){
							$("#moreid").addClass("hidden");
						}
					}else{
						if(pagenums == 1){
							var str = '<div class="nolistdiv">暂无记录<div>';
							g("tmain").innerHTML = str;
							
							$("#moreid").addClass("hidden");
						}else{
            				upToRefresh();
							pagenums--
							$("#moreid").addClass("hidden");
							mui.toast('没有更多数据了');
						}
					}
					
				})
			}
			
			//设置商品list
			function setsortlist(data){
				var str = "";
				if(data.length){
					for(var i = 0; i < data.length; i++){
					str += '<div class="goodsdiv"><div class="topdiv"><div class="topimg godetails" data-gid="'+data[i].id+'">';
	    				if(data[i].product_images&&data[i].product_images.path_name){
	    					str += '<img src="'+data[i].product_images.path_name+'"/>';
	    				}else{
	    					str += '<img src="../img/noimg.png"/>';
	    				}
	    				str += '</div><div class="toptext"><div class="textdiv godetails" data-gid="'+data[i].id+'"><span class="fe09">'+
		    			data[i].product_name +
		    			'</span><span class="fe07">￥'+
		    			data[i].retail_price +
		    			'</span></div><div class="textdiv godetails" data-gid="'+data[i].id+'"><span class="fe07">库存：'+
		    			data[i].stock +
		    			'</span></div><div class="textdiv"><span class="fe07">积分：'+
		    			data[i].convert_point +
		    			'</span><span class="delgoods" data-gid="'+data[i].id+'">删除</span></div></div></div></div></div>';
					}
				}else{
					str ='<div class="nolistdiv">暂无商品</div>';
				}
				
				g("tmain").innerHTML = str;
				//mui('.mui-scroll-wrapper').scroll();
			}
			
			//修改商品页
			function gosetgoods(gid){
				var list = {gid: gid};
				mui.openWindow({
				    url: 'goods/setgoods.html?gid='+gid,
				    id: 'setgoods',
				    extras: list,
				 });
			}
			
			//删除商品
			function delgoods(gid){
				mui.confirm("是否删除","",["取消","确定"],function(e){
					if(e.index == 1){
						var data = {
							url:"/api/product/del",
							data:{access_token:acctoken(),id:gid}
						}
						ajax(data,function(res){
							console.log("删除",res);
							mui.toast(res.msg);
							getsortlist();
						})
					}
				})
			}
			
			//获取商品分类列表
			function getproduct(){
				var data = {url:"/api/product_sort/lst",data:{access_token:acctoken()}}
				ajax(data,function(res){
					console.log("获取商品类型",res)
					var str = '<div class="bgw" id="0">所有商品</div>';
					for(var i = 0; i < res.data.length; i++){
						str += '<div class="" id="'+res.data[i].id+'" onclick="">'+
				    			res.data[i].name+
				    			'</div>';
					}
					g("selectdiv").innerHTML = str;
				});
			}
			
			//重置上拉
			function upToRefresh(){
				mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
				mui('#refreshContainer').pullRefresh().refresh(false);
			}
			
			//扫码页面调用
			function setcard_number(scan){
				console.log("回调");
				pagenums = 1;
	            glist = [];
            	upToRefresh();
				g("card_number").value = scan;
				getsortlist();
			}
			
			//更多
			function more_list(){
				pagenums++;
				getsortlist();
			}
			
			//刷新
			function onshow(){
				pagenums = 1;
				glist = [];
				getsortlist();
			}
		</script>
	</body>

</html>